<template>
  <svg
    class="inline-block"
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
    aria-hidden="true"
  >
    <use :xlink:href="symbolId"></use>
  </svg>
</template>
<script lang="ts" setup>
/**
 * 使用 Svg Sprite 技术实现图标
 *
 * 需要使用编译插件 vite-plugin-svg-icons 帮助生成 svg 图片集合
 */
import { computed } from "vue";

const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  name: {
    type: String,
    required: true,
  },
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
